<template>
  <div class="shop_z" @click="fn">
    <div>
      <!--头部-->
      <div class="shop_header" >
        <div class="shop_my">
          <van-image
            round
            width="5rem"
            height="5rem"
            :src="
              queryParams.icon
                ? queryParams.icon
                : 'https://img01.yzcdn.cn/vant/cat.jpeg'
            "
          />
        </div>
        <div class="register">
          <div style="color: white">
            {{ queryParams.name ? queryParams.name : "请登录" }}
          </div>
          <div>
            <van-icon name="arrow" color="#ccc" />
          </div>
        </div>
      </div>
      <!--遮罩层-->
      <div>
        <van-overlay :show="show">
          <div class="wrapper" @click.stop>
            <div class="block">
              <h3>声明与政策</h3>
              <p>欢迎来到小米有品</p>
              <p>
                您可在有品进行商品浏览、支付购买、售后服务等功能。我们将严格遵守相关法律法规和隐私政策以保护您的个人信息。请您阅读并同意
              </p>
              <div class="shop_log">
                <van-button type="default" @click="show = false"
                  >不同意</van-button
                ><van-button
                  type="default"
                  @click="$router.push({ path: '/login' })"
                  >同意</van-button
                >
              </div>
            </div>
          </div>
        </van-overlay>
      </div>

      <div class="shop_indent">
        <h3>我的订单</h3>
        <van-icon name="arrow" size="20px" color="#ccc" />
      </div>
      <div>
        <van-grid>
          <van-grid-item icon="card" text="待付款" />
          <van-grid-item icon="cart" text="待收货" />
          <van-grid-item icon="smile-comment" text="评价" />
          <van-grid-item icon="bill" text="退款/售后" />
        </van-grid>
      </div>
      <div class="shop_com">
        <div
          class="shop_man"
          v-for="item in list"
          :key="item.id"
          :to="item.url"
        >
          <div class="shop_man_le">
            <van-icon color="#ccc" size="20px" :name="item.iocn_a" />
          </div>
          <div class="shop_man_ri">
            <h3>{{ item.name }}</h3>
            <van-icon :name="item.iocn_c" size="20px" color="#ccc" />
          </div>
        </div>
        <!--退出-->
        <div class="shop_quit" v-if="isIf">
          <van-button @click="rovme" size="50px" color="#ccc" type="info"
            >退出</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      reveal: true,
      queryParams: "",
      list: [
        {
          id: 1,
          name: "我的资产",
          iocn_a: "wap-home",
          iocn_c: "arrow",
        },
        { id: 2, name: "优惠卷", iocn_a: "coupon", iocn_c: "arrow" },
        { id: 3, name: "我的收藏", iocn_a: "smile", iocn_c: "arrow" },
        {
          id: 4,
          name: "地址管理",
          iocn_a: "browsing-history",
          iocn_c: "arrow",
        },
        { id: 5, name: "资质证照", iocn_a: "shop-collect", iocn_c: "arrow" },
        { id: 6, name: "协议规则", iocn_a: "font", iocn_c: "arrow" },
        { id: 7, name: "帮助与反馈", iocn_a: "column", iocn_c: "arrow" },
      ],
    };
  },
  mounted() {
    this.queryParams = JSON.parse(localStorage.getItem("queryParam") || "[]");
    if (!this.queryParams) {
      return (this.show = false);
    }
    console.log(this.queryParams);
  },
  methods: {
    fn_reveal() {
      this.reveal = !this.reveal;
    },
    fn() {
      if (this.queryParams == false) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    rovme() {
      window.localStorage.clear();
      history.go(0);
    },
  },
  computed: {
    isIf() {
      console.log(this.queryParams.length != 0);
      return this.queryParams.length != 0;
    },
  },
};
</script>

<style lang="less" scoped>
.shop_z {
  padding-bottom: 50px;
}
.shop_header {
  height: 7rem;
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: rgb(139, 90, 26);
  .shop_my {
    width: 25%;
    .van-image {
      margin: 0 auto;
    }
  }
  .register {
    width: 75%;
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
  }
}
.van-grid-item {
  color: rgb(139, 90, 26);
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 15rem;
  padding: 10px 10px 0px 10px;
  background-color: #fff;
  p {
    margin-top: 10px;
  }
  border-radius: 10px;

  h3 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-bottom: 10px;
    font-size: 20px;
    // font-family: "宋体";
  }
  .shop_log {
    text-align: center;
    margin-top: 10px;
    .van-button {
      font-size: 16px;
      height: 50px;
    }
  }
}
.shop_indent {
  display: flex;
  align-items: center;
  padding: 0px 1rem;
  height: 3rem;
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
}
.shop_man {
  height: 3rem;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  .shop_man_le {
    width: 10%;
    text-align: center;
  }
  .shop_man_ri {
    padding: 5px;
    width: 90%;
    display: flex;
    justify-content: space-between;
  }
}
.shop_login {
  margin-bottom: 3rem;
}
.shop_quit {
  width: 100%;
  margin: 1rem auto;
  padding-left: 45%;
  box-sizing: border-box;
  .van-button {
    font-size: 50px;
  }
}
</style>
